<template>
	<view class="box" id="scrollidbilbili">
		<view class="conterBox" v-for="item,index in 50" :key='index'>
			{{item}}
		</view>
		<!-- 	
		<view class="conterBox" slot='sliks'>
			qweqwe
		</view> -->
	</view>
</template>


<script>
	export default {
		data() {
			return {}
		},
		name: 'biliSlide',
		onLoad() {
			this.getimg()
			// document.getElementById('app').addEventListener('scroll', this.scrollHandle, true);
			this.getlistDOM()

		},
		methods: {
			getlistDOM() {

				document.getElementById('scrollidbilbili').addEventListener('scroll', function() {
					clearInterval(timer);
					// 重新新的定时器
					timer = setInterval(function() {
						if (container.scrollLeft == scrollLeft && container.scrollTop == scrollTop) {
							// 滚动距离相等，认为停止滚动了
							clearInterval(timer);
							console.log(this);
							// ... 做你想做的事情，如回调处理
						} else {
							// 否则，依然记住上一次滚动位置
							scrollLeft = container.scrollLeft;
							scrollTop = container.scrollTop;
						}
					}, 100);
				});
			}
			// scrollHandle () {
			//     const offset = document.getElementById('app').getBoundingClientRect(); // vue中，使用this.$el获取当前组件的根元素
			//     const offsetTop = offset.top;
			//     const offsetBottom = offset.bottom;
			//     const offsetHeight = offset.height;
			//     // 进入可视区域
			//     if (offsetTop <= window.innerHeight && offsetBottom >= 0) {
			//         console.log('进入可视区域');
			//         // do something...
			//     } else {
			//         console.log('移出可视区域');
			//         // do something...
			//     }
			// }
			// async getimg(){
			// let data = 	await this.http(this.api.silkAll)
			// console.log(data);
			// }
		}
	}
</script>

<style scoped lang="less">
	.box {
		width: 100%;
		height: 100vh;
		background-color: #C0C0C0;
		overflow-y: scroll;
		padding: 0;
		scroll-snap-type: y mandatory;
	}

	.conterBox {
		width: 100%;
		height: 100vh;
		background-color: #C0C4CC;
		display: flex;
		justify-content: center;
		align-items: center;
		scroll-snap-align: start;
	}

	.conterBox1 {
		background: #0069D9;
	}

	.conterBox2 {
		background: #55aa7f;
	}
</style>
